<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>实时流程图</span>
      </div>
      <el-popover
        placement="top"
        width="300"
        ref="imgPop"
        :disabled="popoverView"
        trigger="manual"
        v-model="imgTaskExtVisible">
        <div v-for="task in imgTask.tasks" :key="task.id">
          <el-row style="text-align: left;">
            <el-col :span="8">
              <el-tag type="info">节点名称</el-tag>
            </el-col>
            <el-col :span="16">
              <el-tag type="success">{{imgTask.taskName}}</el-tag>
            </el-col>
          </el-row>
          <el-row style="margin-top: 5px;text-align: left;">
            <el-col :span="8">
              <el-tag type="info">审批人</el-tag>
            </el-col>
            <el-col :span="16">
              <el-tag type="success">{{task.realName + '（' + task.assignee + '）'}}</el-tag>
            </el-col>
          </el-row>
          <el-row style="margin-top: 5px;text-align: left;">
            <el-col :span="8">
              <el-tag type="info">决策</el-tag>
            </el-col>
            <el-col :span="16">
              <el-tag v-if="task.myDeleteReason" type="success">{{task.myDeleteReason}}</el-tag>
            </el-col>
          </el-row>
          <el-row style="margin-top: 5px;text-align: left;">
            <el-col :span="8">
              <el-tag type="info">审批时间</el-tag>
            </el-col>
            <el-col :span="16">
              <el-tag v-if="task.endTime" type="success">{{task.endTime}}</el-tag>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </div>
        <img slot="reference" @click="touchstart" :src="imgUrl">
      </el-popover>
      <img v-if="popoverView" :src="processImgUrl">
    </el-card>
  </div>
</template>
<script>

export default {
  data () {
    return {
      loading: '',
      imgUrl: '',
      processImgUrl: '',
      popoverView: true,
      imgTaskExtVisible: false,
      imgTaskExts: [],
      imgTask: {},
      formId: '',
      dataForm: {
        id: '',
        name: '',
        procName: ''
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.dataForm.procInstId = this.$route.params.procInstId
      this.formId = this.$route.params.formId
      if (this.dataForm.procInstId) {
        this.popoverView = false
        this.getImg()
      } else {
        this.getProcessImg()
      }
    },
    // 当鼠标点击时触发，类似onclick事件
    touchstart (e) {
      this.imgTaskExtVisible = true
      // 获取x 坐标
      let x = e.offsetX
      // 获取y 坐标
      let y = e.offsetY
      if (this.imgTaskExts && this.imgTaskExts.length > 0) {
        let imgTasks = this.imgTaskExts.filter(task => {
          let xflag = x >= task.x && x <= task.x + task.w
          let yflag = y >= task.y && y <= task.y + task.h
          return xflag && yflag
        })
        if (imgTasks.length > 0) {
          this.imgTask = imgTasks[0]
          console.log(this.$refs.imgPop)
        } else {
          this.imgTaskExtVisible = false
        }
      } else {
        this.imgTaskExtVisible = false
      }
    },
    getImg () {
      this.$nextTick(() => {
        this.loading = true
        this.$http.get(`act/running/highlightImg/${this.dataForm.procInstId}`).then(({ data: res }) => {
          this.loading = false
          if (res.code !== 0) {
            return false
          }
          this.imgUrl = res.data.imgBase64
          this.imgTaskExts = res.data.imgTaskExts
        }).catch(() => { })
      })
    },
    getProcessImg () {
      this.$nextTick(() => {
        this.loading = true
        this.$http.get(`/act/process/resource/form/${this.formId}`).then(({ data: res }) => {
          this.loading = false
          if (res.code !== 0) {
            return false
          }
          this.processImgUrl = res.data.imgBase64
        }).catch(() => {
        })
      })
    }
  }
}
</script>
